<template>
	<view :class="[isDark?'dark':'assetspage', $store.state.AppStyle]" :style="{'min-height':isDark? '100vh':'100vh', 'background-color':isDark?'#1c1c1c':'#fff'}">
		<view class="header" :style="[{height:CustomBar*2 + 'rpx'}]"
			>
			<view class="cu-bar" :class="scrollTop>40?(isDark?'color-white':'color-black'):'color-white'" :style="{'height': CustomBar*2 + 'rpx','padding-top':StatusBar*2 + 'rpx', 'background-color': scrollTop>40?(isDark?'#1c1c1c !important':'#ffffff !important'):'transparent !important'}">
				<view class="action" @tap="back">
					<text class="cuIcon-back" :class="scrollTop>40?(isDark?'color-white':'color-black'):'color-white'"></text>
				</view>
				<view class="content text-bold" :style="[{top:StatusBar*2 + 'rpx'}]"
					:class="scrollTop>40?(isDark?'color-white':'color-black'):'color-white'">
					{{$t('user.assets.mywallet')}}
				</view>
				<view class="action">
				</view>
			</view>
		</view>
		<view :style="[{padding:NavBar + 'rpx 20rpx 0rpx 20rpx'}]"></view>
		<view>
			<view class="page" :style="{'background-color':isDark?'#1c1c1c':'transparent'}">

				<view class="tn-margin-right-lg tn-margin-left-lg"
					style="margin-top: 80rpx;margin-bottom: 80rpx;display: flex;justify-content: space-between;position: relative;z-index: 200;">
					<view style="font-weight: bold;">
					<text :style="{'font-size': '100rpx', 'font-family': 'D-DIN', 'color':isDark?'#ffffff':'#000000'}">{{assets}}</text><text
						:style="{'font-size': '36rpx', 'margin-left': '10rpx', 'color':isDark?'#ffffff':'#000000'}">{{currencyName}}</text>
					</view>
					<view style="display: flex;align-items: center;">
						<block v-if="tixian==1">
							<button class="radius-50 assets-bt" style="margin-right: 20rpx;" v-if="group=='editor'||group=='administrator'||isvip==1" @tap="userwithdraw">{{$t('user.assets.withdrawal')}}</button>
						</block>
						<block v-if="tixian==2">
							<button class="radius-50 assets-bt" style="margin-right: 20rpx;" v-if="group=='administrator'||isvip==1" @tap="userwithdraw">{{$t('user.assets.withdrawal')}}</button>
						</block>
						<block v-if="tixian==3">
							<button class="radius-50 assets-bt" style="margin-right: 20rpx;" v-if="group=='editor'||group=='administrator'" @tap="userwithdraw">{{$t('user.assets.withdrawal')}}</button>
						</block>
						<block v-if="tixian==4">
							<button class="radius-50 assets-bt" style="margin-right: 20rpx;" @tap="userwithdraw">{{$t('user.assets.withdrawal')}}</button>
						</block>
						<button class="radius-50 assets-bt" v-if="chongzhi===1" @tap="userrecharge">{{$t('common.recharge')}}</button>
					</view>
					
				</view>
				<view class="vip-icon tn-icon-money" :style="{'color':isDark?'#3f3f3f !important':''}"></view>


				<view class="content" style="position: absolute;z-index: 200;" :style="{'background-color':isDark?'#1c1c1c':'#ffffff'}">
					<view class="title" style="padding-left: 20rpx;"><text class="title-text" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.assets.expensesdetail')}}</text></view>
					<view :style="{'border-bottom': isDark?'solid 1px #2c2c2c':'solid 1px #f3f3f3'}"></view>
					<view class="no-data" v-if="orderList.length==0" :style="{'color':isDark?'#cccccc':'#666666'}">
						<text class="cuIcon-text"></text>{{$t('common.nodata')}}
					</view>
					<view class="order-box tn-flex justify-between align-center" :style="{'border-top': 'none', 'background-color':isDark?'#1c1c1c':'#ffffff', 'border-bottom':isDark?'1px solid #2c2c2c':'1px solid #e5e5e5'}" v-for="(item,index) in orderList" :key="index" @tap="getOrderId(item.outTradeNo)">
						<view>
							<view :style="{'font-size': '28rpx', 'font-weight': 'bold', 'color': isDark?'#ffffff':'#414141'}">
								{{item.subject}}<text style="margin-left: 10rpx;color: #e83a30;" v-if="item.status==0">{{$t('user.assets.unpaid')}}</text>
							</view>
							<view :style="{'font-size': '25rpx', 'color': isDark?'#888888':'#888888', 'margin-top': '15rpx'}">
								{{formatDate(item.created)}}
							</view>
						</view>
						<view style="font-family: 'D-DIN';font-weight: bold;font-size: 30rpx;display: flex;align-items: flex-end;color: rgb(249,183,36);">
							<text style="font-weight:bold;margin-right: 4rpx;">
								<block v-if="item.isAdd">
									+
								</block>
								<block v-else>
									-
								</block>
							</text>
							<text style="font-size: 34rpx;">{{item.totalAmount}}</text>
							<text class="tn-icon-money" style="margin-left: 5rpx;"></text>
						</view>
					</view>
					<view class="text-tips margin-top text-center text-sm" :style="{'color':isDark?'#888888':'#999999'}">
						{{$t('user.assets.dislast30item')}}
					</view>
					<tn-modal v-model="show" :title="modTitle" :showCloseBtn="true" :content="modContent" :button="button" @click="copyId"></tn-modal>
				</view>
			</view>
		</view>
		<view class="loading" v-if="isLoading==0">
			<view class="loading-main">
				<image src="../../static/loading.gif"></image>
			</view>
		</view>
	</view>
</template>



<script>
	import {
		localStorage
	} from '../../js_sdk/mp-storage/mp-storage/index.js'
	import darkModeMixin from '@/utils/darkModeMixin.js'
	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar: this.StatusBar + this.CustomBar,
				AppStyle: this.$store.state.AppStyle,
				viptext: "",
				isLoading: 0,
				button: [
				{
				  text: $t('user.assets.copyordernum'),
				  backgroundColor: '#f8deb3',
				  fontColor: '#414141',
				  shape: 'round'
				}
			  ],
				modTitle: $t('user.assets.orderdetail'),
				modContent: '',
				show: false,
				vipTypeList: [{
					name: ''
				}],
				advantages: [{
						icon: 'eye',
						name: $t('user.assets.exclusivetxt'),
						desc: $t('user.assets.viewvipcontent')
					},
					{
						icon: 'vip',
						name: $t('user.assets.noblename'),
						desc: $t('user.assets.memberprestige')
					},
					{
						icon: 'theme',
						name: $t('user.assets.namehighlight'),
						desc: $t('user.assets.highlightmember')
					},
					{
						icon: 'vip-diamond',
						name: $t('user.assets.memberarea'),
						desc: $t('user.assets.unmembercircle')
					},
					{
						icon: 'more-horizontal',
						name: $t('user.assets.moreprivilege'),
						desc: $t('user.assets.unlockupddate')
					}
				],
				current: 0, // 当前选中套餐下标
				token: "",
				avatar: "",
				name: "",
				vipDiscount: 0,
				scrollTop: 0,
				tixian:0,
				chongzhi:0,
				orderList:[],
				vipPrice: 0,
				vipDay: 0,
				scale: 0,
				group:"",
				zktext: "",
				copeId: "",
				currencyName: "",
				assets: "",
				style: "",
				isvip: 0,
				vip: 0,
			}
		},
		onPageScroll(res) {
			var that = this;
			that.scrollTop = res.scrollTop;
		},
		onLoad() {
			var that = this;
			
			that.getset();
			that.getVipInfo();

		},
		onShow() {
			var that = this;
			// #ifdef APP-PLUS
			that.initStatusBarStyle();
			// #endif
			if (localStorage.getItem('userinfo')) {
				var userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.token = userInfo.token;
				that.avatar = userInfo.avatar;
				that.style = "background-image:url(" + userInfo.avatar + ");"
				that.group = userInfo.group
				if (userInfo.screenName) {
					that.name = userInfo.screenName;
				} else {
					that.name = userInfo.name;
				}
			} else {
				uni.showToast({
					title: that.$t('common.plslogin'),
					icon: 'none',
					duration: 1000,
					position: 'bottom',
				});
			}
			that.userStatus();
			that.getOrderList();

		},
		methods: {
			getOrderList(){
				var that = this;
				var data = {
					"token":that.token
				}
				that.$Net.request({
					url: that.$API.payLogList(),
					data:data,
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						uni.stopPullDownRefresh()
						if (res.data.code == 1) {
						    var list = res.data.paydata;
						    if (list.length > 0) {
						        list.forEach(function(order) {
						            if (typeof order.totalAmount === 'string') {
						                if (order.totalAmount[0] === '-') {
											order.totalAmount = order.totalAmount.substring(1); // 去掉第一个字符 '-'
											order.isAdd = false;
										} else {
						                    order.isAdd = true;
						                }
						            }
						        });
						        that.orderList = list;
						    }
						}
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					},
					fail: function(res) {
						uni.stopPullDownRefresh()
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						var timer = setTimeout(function() {
							that.isLoading=1;
							clearTimeout('timer')
						}, 300)
					}
				})
			},
			
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// #ifdef APP-PLUS
			initStatusBarStyle() {
				var that = this;
				if (uni.getSystemInfoSync().platform === 'android') {
					plus.navigator.setStatusBarStyle('dark'); // Android 平台
				} else {
					plus.navigator.setStatusBarStyle('dark'); // iOS 平台
				}
			},
			onPageScroll(event) {
				this.scrollTop = event.scrollTop;
				if (this.scrollTop > 40) {
					if (uni.getSystemInfoSync().platform === 'android') {
						plus.navigator.setStatusBarStyle('dark'); // Android 平台
					} else {
						plus.navigator.setStatusBarStyle('dark'); // iOS 平台
					}
				} else {
					if (uni.getSystemInfoSync().platform === 'android') {
						plus.navigator.setStatusBarStyle('dark'); // Android 平台
					} else {
						plus.navigator.setStatusBarStyle('dark'); // iOS 平台
					}
				}
			},
			// #endif
			userrecharge(){
				uni.navigateTo({
				    url: '/pages/user/userrecharge'
				});
			},
			userwithdraw(){
				uni.navigateTo({
				    url: '/pages/user/userwithdraw'
				});
			},
			getVipInfo() {
				var that = this;
				that.$Net.request({
					url: that.$API.getVipInfo(),
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						if (res.data.code == 1) {
							that.vipDiscount = res.data.data.vipDiscount;
							if (res.data.data.vipDiscount == '1.0') {
								that.zktext = that.$t('global.nodiscount')
							} else if (res.data.data.vipDiscount == '0.0') {
								that.zktext = that.$t('user.assets.free')
							} else {
								that.zktext = (Number(res.data.data.vipDiscount) * 10).toString() + that.$t('user.assets.break');
							}
							that.vipPrice = res.data.data.vipPrice;
							that.scale = res.data.data.scale;
							that.vipDay = res.data.data.vipDay;
						}
						var timer = setTimeout(function() {
							that.isLoading = 1;
							clearTimeout('timer')
						}, 300)
					},
					fail: function(res) {
						var timer = setTimeout(function() {
							that.isLoading = 1;
							clearTimeout('timer')
						}, 300)
					}
				})
			},
			getOrderId(id) {
				 var that = this;
				 that.modContent = that.$t('user.assets.orderid')+id;
				 that.copeId = id;
				 that.show = true;
			},
			copyId(index){
				var that = this;
				if (index.index == 0) {
					console.log(123);
					that.show = false;
					uni.setClipboardData({
						data: that.copeId,
						success: function() {
							uni.showToast({
								title: that.$t('user.assets.orderidcopy'),
								icon: 'success'
							})
						}
					})
			  }
			},
			getset() {
				var that = this;
				uni.request({
					url: that.$API.SPset(),
					method: 'GET',
					dataType: "json",
					success(res) {
						that.currencyName = res.data.assetsname;
						that.viptext = res.data.viptext;
						that.chongzhi = res.data.chongzhi;
						that.tixian = res.data.tixian;
					},
					fail(error) {
						
					}
				})
			},
			toBuyVIPpackage(id) {
				var that = this;
				var token = "";
				if (localStorage.getItem('userinfo')) {
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					token = userInfo.token;
				} else {
					uni.showToast({
						title: that.$t('common.plslogin'),
						icon: 'none',
						duration: 1000,
						position: 'bottom',
					});
				}
				var data = {
					"id": id,
					"token": token
				}
				uni.showModal({
					title: that.$t('user.assets.surepurpackage'),
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: that.$t('common.loadmore')
							});
							that.$Net.request({
								url: that.$API.buyVIPpackage(),
								data: data,
								header: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								method: "get",
								dataType: 'json',
								success: function(res) {
									setTimeout(function() {
										uni.hideLoading();
									}, 1000);
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
									if (res.data.msg == "当前资产不足，请充值") {
										uni.navigateTo({
											url: '/pages/user/userrecharge'
										});
									}
									if (res.data.code == 1) {
										var timer = setTimeout(function() {
											that.back();
											clearTimeout('timer')
										}, 1000)
									}
								},
								fail: function(res) {
									setTimeout(function() {
										uni.hideLoading();
									}, 1000);
									uni.showToast({
										title: that.$t('common.networkfail'),
										icon: 'none'
									})
								}
							})
						}
					}
				});
			},
			getType(i) {
				var arr = [ this.$('global.hardgood'), , this.$t('global.softres'), this.$t('global.payread')];
				return arr[i - 1];
			},
			userStatus() {
				var that = this;
				that.$Net.request({
					url: that.$API.userStatus(),
					data: {
						"token": that.token
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						if (res.data.code == 1) {
							that.assets = res.data.data.assets;
							that.vip = res.data.data.vip;
							that.isvip = res.data.data.isvip;
						}
					},
					fail: function(res) {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
					}
				})
			},
			formatDate(datetime) {
				var datetime = new Date(parseInt(datetime * 1000));
				// 获取年月日时分秒值  slice(-2)过滤掉大于10日期前面的0
				var year = datetime.getFullYear(),
					month = ("0" + (datetime.getMonth() + 1)).slice(-2),
					date = ("0" + datetime.getDate()).slice(-2),
					hour = ("0" + datetime.getHours()).slice(-2),
					minute = ("0" + datetime.getMinutes()).slice(-2);
				//second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + date + " " + hour + ":" + minute;
				// 返回
				return result;
			},
			change(k) {
				this.current = k;
			},
			pay() {
				console.log(`点击支付`, this.options[this.current])
			}
		},
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'D-DIN';
		src: url('../../tuniao-ui/static/D-DIN.ttf');
	}
	.dark .page {
		background: #1c1c1c !important;
	}

	.assetspage {
		background: linear-gradient(to right, rgb(244, 211, 157), rgb(255, 244, 223));
	}
	.dark .header .cu-bar {
		background: transparent !important;
	}
	.page {
		width: 100vw;
		padding-top: 50rpx;

		.user {
			display: flex;
			align-items: center;
			background: #F9D7B2;
			width: 700rpx;
			margin: auto;
			box-sizing: border-box;
			padding: 0 30rpx;
			border-radius: 20rpx 20rpx 0 0;
			height: 160rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.user-info-vip {
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-left: 15rpx;

				text {
					&:nth-child(1) {
						font-weight: bold;
					}

					&:nth-child(2) {
						font-size: 28rpx;
						color: #777;
					}
				}
			}
		}

		.content {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			width: 100vw;

			.title {
				font-weight: bold;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 34rpx;
			}
			.title-text::after {
			    content: '';
				display: block;
				width: 38rpx;
				height: 8rpx;
				background-color: black;
				position: relative;
				left: 46rpx;
				right: 0rpx;
				bottom: 18rpx;
				border-radius: 10rpx;
			}

			.option {
				display: flex;
				flex-wrap: wrap;
				/* 支持换行 */

				.option-item {
					width: 30%;
					/* 将宽度调整为 30% */
					margin: 10rpx;
					/* 增加底部间距，避免项目之间过于紧凑 */
					height: 280rpx;
					box-sizing: border-box;
					border: 2upx solid #999;
					border-radius: 15rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					padding: 14rpx;

					&:active {
						background: #FFF6ED;
						border-color: #f5984a;
					}

					.option-item-time {
						font-weight: bold;
						font-size: 28rpx;
						color: #555;
					}

					.option-item-price {
						font-weight: bold;
						margin: 20rpx 0;

						text {
							&:nth-child(1) {
								font-size: 46rpx;
							}
						}
					}

					.option-item-tip {
						font-size: 24rpx;
						color: #999;
						text-align: center;
					}

					.option-item-tag {
						position: absolute;
						left: -5rpx;
						top: -10rpx;
						font-weight: bold;
						font-size: 24rpx;
						padding: 5rpx 10rpx;
						border-radius: 12rpx;
						background: red;
						color: #fff;
					}
				}

				.option-selected {
					background: #FFF6ED;
					border-color: #f5984a;

					.option-item-price {
						color: #333;
					}
				}
			}


			.button {
				background: #F9D7B2;
				height: 100rpx;
				border-radius: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;

				&:active {
					background: #ceb295;
				}

				text {
					&:nth-child(1) {
						font-weight: bold;
						color: #333;
						line-height: 1.5;
					}

					&:nth-child(2) {
						color: #555;
						font-size: 28rpx;
					}
				}
			}

			.agreement {
				font-size: 28rpx;
				text-align: center;
				margin-top: 20rpx;
				color: #f5984a;

				&:active {
					color: #9c602f;
				}
			}

			.advantage {
				display: flex;
				flex-wrap: wrap;

				.advantage-item {
					display: flex;
					width: 350rpx;
					margin-bottom: 20rpx;
					margin-top: 20rpx;

					.advantage-item-icon {
						border: 2upx solid #F9D7B2;
						border-radius: 50%;
						width: 70rpx;
						height: 70rpx;
						color: #f5984a;
						font-size: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;


						text {
							margin: 10rpx;
							width: 50rpx;
							height: 50rpx;
						}
					}

					.advantage-item-text {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-left: 15rpx;

						text {
							&:nth-child(1) {
								font-size: 28rpx;
								color: #f5984a;
							}

							&:nth-child(2) {
								font-size: 24rpx;
								color: #888;
							}
						}
					}
				}
			}

			.notice {
				display: flex;
				flex-direction: column;

				text {
					font-size: 24rpx;
					color: #888;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.vip-icon {
		position: absolute;
		// #ifdef H5 || MP
		top: 40rpx;
		// #endif
		// #ifdef APP-PLUS
		top: 100rpx;
		// #endif
		right: 0rpx;
		z-index: 100;
		font-size: 448rpx;
		color: #fff4de;
	}

	.color-black {
		color: #414141;
	}

	.color-white {
		color: #414141;
	}
	.assets-bt{
		background: #f8deb3;
		color: #414141;
		font-size: 32rpx;
		font-weight: bold;
		padding: 0 30rpx 0 30rpx;
	}
</style>